<template>
	<div ref="statsRef" class="statistics"></div>
	<div ref="containerRef" class="container"></div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {AxesHelper, Color, MeshBasicMaterial, PerspectiveCamera, PlaneGeometry, Scene, WebGLRenderer, Mesh, BoxGeometry, SphereGeometry, SpotLight, MeshLambertMaterial, MeshPhongMaterial, DoubleSide, PointLight, AmbientLight} from 'three';
import Stats from 'stats.js';

const stats = new Stats();

// stats.dom.style.top = '50px';
stats.showPanel(0);
	
const containerRef = ref<HTMLDivElement>();
const statsRef = ref<HTMLDivElement>();
const scene = new Scene();
const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);

const renderer = new WebGLRenderer();

// renderer.setClearColor(new Color(0xeeeeee));
renderer.setClearColor(0xeeeeee);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;

const cubeGeometry = new BoxGeometry(4, 4, 4);

const cubeMaterial = new MeshLambertMaterial({
// const cubeMaterial = new MeshBasicMaterial({
	color: 0xff0000,
	wireframe: false,
});

const cube = new Mesh(cubeGeometry, cubeMaterial);

cube.castShadow = true;
cube.position.set(2, 2, 2);
scene.add(cube);

/**
* 光源设置
*/
//聚光灯
const spotLight = new SpotLight(0xffffff, 3000);

spotLight.position.set(-20, 30, -10);
spotLight.castShadow = true;
scene.add(spotLight);

const axes = new AxesHelper(20);

scene.add(axes);

const planeGeometry = new PlaneGeometry(60, 20);
const meshBasicMaterial = new MeshLambertMaterial({color: 0xcccccc});
// const meshBasicMaterial = new MeshBasicMaterial({color: 0xcccccc});
const plane = new Mesh(planeGeometry, meshBasicMaterial);

plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);

const sphereGeometry = new SphereGeometry(4);

const sphereMaterial = new MeshLambertMaterial({
// const sphereMaterial = new MeshBasicMaterial({
	color: 0x7777ff,
	wireframe: false,
});

const sphere = new Mesh(sphereGeometry, sphereMaterial);

sphere.castShadow = true;
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere);

let step = 0;

function renderScene(){
	stats.update();
	cube.rotation.x += 0.02;
	cube.rotation.y += 0.03;
	cube.rotation.z += 0.04;
	// cube.scale.x += 0.01;
	step += 0.04;
	sphere.position.x = 20 + 10 * Math.cos(step);
	sphere.position.y = 2 + 10 * Math.abs(Math.sin(step));
	requestAnimationFrame(renderScene);
	renderer.render(scene, camera);
}

renderScene();

onMounted(() => {
	statsRef.value?.append(stats.dom);
	containerRef.value?.appendChild(renderer.domElement);
	renderer.render(scene, camera);
});
</script>

<style scoped>
</style>